<template>
  <div>
      <h2 style="text-align: center;">用户还款</h2>
      <table class="table table-bordered">
        <tr>
          <td>借款名称</td>
          <td>
            <input type="text" v-model="info.xname">
          </td>
        </tr>
        <tr>
          <td>借款金额</td>
          <td>
            <input type="text" v-model="info.maxprice">
          </td>
        </tr>
        <tr>
          <td>利息</td>
          <td>
            <select v-model="info.lixi">
              <option value="">请选择</option>
              <option value="1%">1%</option>
              <option value="3%">3%</option>
              <option value="5%">5%</option>
              <option value="7%">7%</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>还款金额</td>
          <td>
            <input type="text" v-model="info.jiekuanprice">
          </td>
        </tr>
        <tr>
          <td>还款日期</td>
          <td>
            <input type="date">
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="button" value="还款" @click="huankuan">
          </td>
        </tr>
      </table>
  </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router';
let router=useRouter();
let route=useRoute();
const info=ref({
  xname:"",
  maxprice:"",
  jiekuanprice:"",
  lixi:"",
})
//生命周期
onMounted(()=>{
  fan();
})
//回显函数
const fan=()=>{
  axios({
    url:"http://localhost:8322/api/User/fantian",
    method:"get",
    params:{
      xid:route.params.xid
    }
  })
  .then((res)=>{
    info.value=res.data;
  })

}

//还款
const huankuan=()=>{
  if(info.value.jiekuanprice > info.value.maxprice)
  {
    alert("还款金额不能大于借款金额");
    return;
  }
  alert("还款成功");
  return;

  axios({
    url:"http://localhost:8322/api/User/huankuanAdd",
    method:"get",
    params:info.value
  })
  .then((res)=>{
    if(res.data>0)
    {
      alert("还款成功");
    }
    else
    {
      alert("还款失败");
    }
  })
}
</script>

<style scoped>

</style>  